<script setup lang="ts">
import { ref, computed, onMounted, reactive } from "vue";
import { GetNowUser } from "@/api/request";

const nowUser = async () => {
  const res = await GetNowUser();
  console.log(res);
};
nowUser();
// 分页配置
const allData = ref([
  { id: 1, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 2, name: "李四", number: "P87654321", expiryDate: "2024-06-30" },
  { id: 3, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 4, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 5, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 6, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 7, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 8, name: "李四", number: "P87654321", expiryDate: "2024-06-30" },
  { id: 9, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 10, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 11, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 12, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 13, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 14, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 15, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 16, name: "李四", number: "P87654321", expiryDate: "2024-06-30" },
  { id: 17, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 18, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 19, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 20, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 21, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 22, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 23, name: "李四", number: "P87654321", expiryDate: "2024-06-30" },
  { id: 24, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 25, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 26, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 27, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 28, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 29, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 30, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  { id: 31, name: "张三", number: "P12345678", expiryDate: "2025-12-31" },
  // 更多数据...
]);
// 预计算分页信息
const pageInfo = computed(() => {
  const pages = [];
  let start = 0;
  let pageNumber = 1;

  while (start < allData.value.length) {
    const size = pageNumber % 2 === 1 ? 4 : 5;
    const end = Math.min(start + size, allData.value.length);
    pages.push({
      page: pageNumber,
      start,
      end,
      size: end - start,
    });
    start = end;
    pageNumber++;
  }

  return {
    pages,
    totalPages: pages.length,
  };
});

// 当前页
const currentPage = ref(1);
// 计算总页数（需要特殊计算）
const totalPages = computed(() => {
  let remaining = allData.value.length;
  let pages = 0;
  let page = 1;

  while (remaining > 0) {
    const size = page % 2 === 1 ? 4 : 5;
    remaining -= size;
    pages++;
    page++;
  }

  return pages;
});
// 当前页数据
const currentPageData = computed(() => {
  const page = pageInfo.value.pages.find((p) => p.page === currentPage.value);
  return page ? allData.value.slice(page.start, page.end) : [];
});

// 当前页显示条数
const currentPageSize = computed(() => {
  const page = pageInfo.value.pages.find((p) => p.page === currentPage.value);
  return page ? page.size : 0;
});

// 分页控制方法
const prevPage = () => currentPage.value > 1 && currentPage.value--;
const nextPage = () =>
  currentPage.value < pageInfo.value.totalPages && currentPage.value++;
// 分页配置
// 卡牌抽奖
const modelFlag = ref<boolean>(false);
const id = ref(0);
const cardIndex = ref([
  { index: 0, isFlipped: false },
  { index: 1, isFlipped: false },
  { index: 2, isFlipped: false },
  { index: 3, isFlipped: false },
  { index: 4, isFlipped: false },
]);
const flipCard = (index: number) => {
  id.value = index;
  cardIndex.value[id.value].isFlipped = true;
};

// 卡牌抽奖
</script>

<template>
  <div class="contain" id="loading-container" style="position: relative">
    <div class="in-main">
      <div class="in-mian-hd">
        <i class="logo"></i>
        <div class="map-name text-3d">S22 灌篮少女</div>
        <div class="user-info">
          <p class="user-name">欢迎，玩家12345</p>
          <div class="time-end">距离本次活动结束还有28天</div>
        </div>
      </div>
      <div class="in-mian-box">
        <div class="in-mian-box-hd">
          <div class="in-mian-box-hd-left">
            <div class="leve">
              <p>等级</p>
              <div class="leve-num">Lv10</div>
            </div>
            <div class="progress-box">
              <div class="progress-hd">
                <span class="exp">EXP/1000</span>
                <span class="shuoming">战令说明</span>
              </div>
              <div class="proress"></div>
            </div>
          </div>
          <div class="in-mian-box-hd-right">
            <a href="" class="gmdj"></a>
            <a href="javascript:;" class="mrxy" @click="modelFlag = true"></a>
            <a href="" class="send"></a>
          </div>
        </div>
        <div class="in-main-box-bd">
          <div class="in-main-box-bd-left">
            <div class="box-left"></div>
            <div class="box-right">
              <ul>
                <!-- highlight-box special -->
                <li
                  v-for="(item, index) in currentPageData"
                  v-bind:key="index"
                  v-bind:class="{
                    current:
                      item.id == 1 ||
                      item.id == 10 ||
                      item.id == 22 ||
                      item.id == 30,
                    special:
                      item.id == 1 ||
                      item.id == 10 ||
                      item.id == 22 ||
                      item.id == 30,
                    'highlight-box':
                      item.id == 1 ||
                      item.id == 10 ||
                      item.id == 22 ||
                      item.id == 30,
                  }"
                >
                  <div class="box-leve">{{ `${item.id}级` }}</div>
                  <div class="common">
                    <div class="pic-box">
                      <img src="" alt="" />
                      <div class="detail-info" style="display: none">
                        <div class="detail-info-hd">
                          <img
                            src="https://img.5211game.com/5211/shop/Goods/Basic/67404.jpg"
                            alt=""
                          />
                          <div class="detail-info-hd-left">
                            <p style="color: #ffffff; font-size: 16px">
                              幸运星底纹
                            </p>
                            <p style="color: #00e4ff">对战平台商城</p>
                            <p style="color: #888888">类型:平台会员</p>
                            <p style="color: #e5ab0f">期限:1天</p>
                          </div>
                        </div>
                        <div class="detail-info-bd">
                          <p>
                            简介:尊享特权:玩游戏获得的地图经验+100%、地图签到积分+100%、每月3张地图
                            经验加速卡*1天、踢出未准踢、地图会员免费商品
                            更多特权:会员专属身份标识、会员特权商品9折，享折上折、平台经验获取+100%、会员房间内所有人地图经验+10%、房间列表红名、房间自由改名、进入房间提醒、好友栏内置顶、好友上限+100、公会人数上限+50
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="advanced">
                    <div class="pic-box">
                      <img src="" alt="" />
                    </div>
                  </div>
                </li>
              </ul>

              <div
                class="box-more highlight-box"
                v-if="currentPage == 1 || currentPage == 2"
              >
                <div class="box-leve">10级</div>
                <div class="common">
                  <div class="pic-box">
                    <img src="" alt="" />
                    <div class="detail-info" style="display: none">
                      <div class="detail-info-hd">
                        <img
                          src="https://img.5211game.com/5211/shop/Goods/Basic/67404.jpg"
                          alt=""
                        />
                        <div class="detail-info-hd-left">
                          <p style="color: #ffffff; font-size: 16px">
                            幸运星底纹
                          </p>
                          <p style="color: #00e4ff">对战平台商城</p>
                          <p style="color: #888888">类型:平台会员</p>
                          <p style="color: #e5ab0f">期限:1天</p>
                        </div>
                      </div>
                      <div class="detail-info-bd">
                        <p>
                          简介:尊享特权:玩游戏获得的地图经验+100%、地图签到积分+100%、每月3张地图
                          经验加速卡*1天、踢出未准踢、地图会员免费商品
                          更多特权:会员专属身份标识、会员特权商品9折，享折上折、平台经验获取+100%、会员房间内所有人地图经验+10%、房间列表红名、房间自由改名、进入房间提醒、好友栏内置顶、好友上限+100、公会人数上限+50
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="advanced">
                  <div class="pic-box">
                    <img src="" alt="" />
                  </div>
                </div>
              </div>

              <div
                class="box-more highlight-box"
                v-if="currentPage == 3 || currentPage == 4"
              >
                <div class="box-leve">22级</div>
                <div class="common">
                  <div class="pic-box">
                    <img src="" alt="" />
                    <div class="detail-info" style="display: none">
                      <div class="detail-info-hd">
                        <img
                          src="https://img.5211game.com/5211/shop/Goods/Basic/67404.jpg"
                          alt=""
                        />
                        <div class="detail-info-hd-left">
                          <p style="color: #ffffff; font-size: 16px">
                            幸运星底纹
                          </p>
                          <p style="color: #00e4ff">对战平台商城</p>
                          <p style="color: #888888">类型:平台会员</p>
                          <p style="color: #e5ab0f">期限:1天</p>
                        </div>
                      </div>
                      <div class="detail-info-bd">
                        <p>
                          简介:尊享特权:玩游戏获得的地图经验+100%、地图签到积分+100%、每月3张地图
                          经验加速卡*1天、踢出未准踢、地图会员免费商品
                          更多特权:会员专属身份标识、会员特权商品9折，享折上折、平台经验获取+100%、会员房间内所有人地图经验+10%、房间列表红名、房间自由改名、进入房间提醒、好友栏内置顶、好友上限+100、公会人数上限+50
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="advanced">
                  <div class="pic-box">
                    <img src="" alt="" />
                  </div>
                </div>
              </div>

              <div
                class="box-more highlight-box"
                v-if="currentPage == 5 || currentPage == 6"
              >
                <div class="box-leve">30级</div>
                <div class="common">
                  <div class="pic-box">
                    <img src="" alt="" />
                    <div class="detail-info" style="display: none">
                      <div class="detail-info-hd">
                        <img
                          src="https://img.5211game.com/5211/shop/Goods/Basic/67404.jpg"
                          alt=""
                        />
                        <div class="detail-info-hd-left">
                          <p style="color: #ffffff; font-size: 16px">
                            幸运星底纹
                          </p>
                          <p style="color: #00e4ff">对战平台商城</p>
                          <p style="color: #888888">类型:平台会员</p>
                          <p style="color: #e5ab0f">期限:1天</p>
                        </div>
                      </div>
                      <div class="detail-info-bd">
                        <p>
                          简介:尊享特权:玩游戏获得的地图经验+100%、地图签到积分+100%、每月3张地图
                          经验加速卡*1天、踢出未准踢、地图会员免费商品
                          更多特权:会员专属身份标识、会员特权商品9折，享折上折、平台经验获取+100%、会员房间内所有人地图经验+10%、房间列表红名、房间自由改名、进入房间提醒、好友栏内置顶、好友上限+100、公会人数上限+50
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="advanced">
                  <div class="pic-box">
                    <img src="" alt="" />
                  </div>
                </div>
              </div>
              <div class="box-more highlight-box" v-if="currentPage >= 7">
                <div class="box-leve">31+级</div>
                <div class="common">
                  <div class="pic-box">
                    <img src="" alt="" />
                    <div class="detail-info" style="display: none">
                      <div class="detail-info-hd">
                        <img
                          src="https://img.5211game.com/5211/shop/Goods/Basic/67404.jpg"
                          alt=""
                        />
                        <div class="detail-info-hd-left">
                          <p style="color: #ffffff; font-size: 16px">
                            幸运星底纹
                          </p>
                          <p style="color: #00e4ff">对战平台商城</p>
                          <p style="color: #888888">类型:平台会员</p>
                          <p style="color: #e5ab0f">期限:1天</p>
                        </div>
                      </div>
                      <div class="detail-info-bd">
                        <p>
                          简介:尊享特权:玩游戏获得的地图经验+100%、地图签到积分+100%、每月3张地图
                          经验加速卡*1天、踢出未准踢、地图会员免费商品
                          更多特权:会员专属身份标识、会员特权商品9折，享折上折、平台经验获取+100%、会员房间内所有人地图经验+10%、房间列表红名、房间自由改名、进入房间提醒、好友栏内置顶、好友上限+100、公会人数上限+50
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="advanced">
                  <div class="pic-box">
                    <img src="" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="in-main-box-bd-right">
            <img src="../assets/images/in-main-box-bd-right.png" alt="" />
          </div>
        </div>
        <div class="in-main-box-action">
          <div class="in-main-box-action-left">
            <div class="in-main-box-action-left-left">
              <div class="in-main-box-action-left-left-top">
                <a href="" class="upgrade"></a>
                <a href="" class="all-lq"></a>
              </div>
              <div class="tips">购买豪华战今立即获得价值 201元的奖励&权益</div>
            </div>
            <div class="in-main-box-action-left-right">
              <a
                href="javascript:;"
                class="mus"
                @click="prevPage"
                :disabled="currentPage === 1"
              ></a>
              <span> 第 {{ currentPage }} 页 </span>
              <a
                href="javascript:;"
                class="adds"
                @click="nextPage"
                :disabled="currentPage === totalPages"
              ></a>
            </div>
          </div>
          <div class="in-main-box-action-right">
            <p>激活卓越战令立即获得</p>
            <h5>篮球少女</h5>
          </div>
        </div>
      </div>

      <div class="task-box">
        <div class="task-box-left">
          <a href="" class="day-task"></a>
          <a href="" class="week-task"></a>
          <div class="exp-box">
            <div class="exp-num">当日经验上限：0/1500</div>
            <div class="exp-progress"></div>
          </div>
        </div>
        <div class="task-box-right">
          <ul>
            <li>
              <img src="@/assets/images/exp.jpg" alt="" />
              <div class="task-right-progress">
                <div class="task-info">
                  <span>登录平台满1天</span><span>1/1</span>
                </div>
                <div class="progress-div"></div>
              </div>
              <a href="" class="lqjl"></a>
            </li>
            <li>
              <img src="@/assets/images/exp.jpg" alt="" />
              <div class="task-right-progress">
                <div class="task-info">
                  <span>登录平台满1天</span><span>1/1</span>
                </div>
                <div class="progress-div"></div>
              </div>
              <a href="" class="lqjl"></a>
            </li>
            <li>
              <img src="@/assets/images/exp.jpg" alt="" />
              <div class="task-right-progress">
                <div class="task-info">
                  <span>登录平台满1天</span><span>1/1</span>
                </div>
                <div class="progress-div"></div>
              </div>
              <a href="" class="lqjl"></a>
            </li>
            <li>
              <img src="@/assets/images/exp.jpg" alt="" />
              <div class="task-right-progress">
                <div class="task-info">
                  <span>登录平台满1天</span><span>1/1</span>
                </div>
                <div class="progress-div"></div>
              </div>
              <a href="" class="lqjl"></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Transition name="fade">
      <div class="model" v-show="modelFlag">
        <div class="in-model">
          <div class="title"></div>
          <p class="tips1">
            购买卓越战令后，勾选卡牌许愿可获得不同数量的战令经验哦
          </p>
          <!-- 卡牌抽奖 -->
          <div class="card-container">
            <div
              @click="flipCard(index)"
              class="card"
              :class="{ 'is-flipped': item.isFlipped }"
              v-for="(item, index) in cardIndex"
              :key="index"
            >
              <div class="card-face card-front">
                <slot name="front"></slot>
              </div>
              <div class="card-face card-back">
                <slot name="back">
                  <div class="exp-icon"></div>
                  <p class="jinyan">18000战令经验</p>
                </slot>
              </div>
            </div>
          </div>
          <!-- 卡牌抽奖 -->

          <div class="tips2">
            每日可翻卡牌一次，距离更新还有13小时14分钟50秒
          </div>
          <div class="upgrade2"></div>
          <div class="sure-btn" @click="modelFlag = false"></div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
@import "@/assets/css/wenzi.css";
@import "@/assets/css/index.css";
.card-container {
  perspective: 1000px;
  width: 100%;
  height: 280px;
  display: flex;
  justify-content: space-around;
}

.card {
  width: 153px;
  height: 235px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-front {
  background: url(../assets/images/card-back.png);
  transition: all 0.3s ease-in-out;
  color: white;
}
.card-front:hover {
  background: url(../assets/images/card-back-hover.png);
}

.card-back {
  background: url(../assets/images/card-font.png);
  color: white;
  transform: rotateY(180deg);
}
.exp-icon {
  width: 101px;
  height: 101px;
  background: url(../assets/images/exp-icon.png);
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.jinyan {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
}
/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.sure-btn {
  width: 307px;
  height: 65px;
  background: url(../assets/images/sure-btn.png);
  margin: 0 auto;
  transition: all 0.5s ease;
  cursor: pointer;
}
.sure-btn:hover {
  background: url(../assets/images/sure-btn-hover.png);
}
</style>
